<template>
  <div class="User">
    <div class="userImg">
      <img width="49" height="49" src="@/assets/img/defaultUser.jpg" alt="" />
      <span>请登录</span>
    </div>
    <!-- 用户收藏等 -->
    <div class="user-collection">
      <ul>
        <li v-for="(item, index) in props.list" :key="index">
          <span>{{item.num}}</span>
          <span class="mt-1">{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {defineProps} from 'vue'
const props = defineProps({
  list:{
    type:Array,
    defauli:() => []
  }
})

</script>

<style lang="scss" scoped>
.User {
  width: 100%;
  height: 200px;
  background:-webkit-linear-gradient(top, #ff8198,#f585cb,);
  margin-bottom: 10px;
}
.userImg {
  display: flex;
  align-items: center;
  margin-left: 20px;
  padding-top: 50px;
  padding-bottom: 10px;
  img {
    border-radius: 100%;
    margin-right: 10px;
  }
  span {
    color: white;
    font-weight: 600;
  }
}
.user-collection {
  ul {
    display: flex;
    align-items: center;
    li {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 14px;
      flex: 1;
      color: white;
    }
  }
}
</style>